<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主播数据管理平台</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 先引入 Vue -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
    <!-- 引入 http-vue-loader -->
    <script src="https://unpkg.com/http-vue-loader"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
      * {
          margin:0;
          padding:0;
      }
      /* 主体 */
      .home_box{
          height: 100vh;
      }
      /* 头部标题栏 */
      .el-header{
          width: 100%;
          background:#a0cfff;
          display: flex;
          justify-content: space-between;
          color: #fff;
          align-items: center;
          padding: 0 10px;
      }
      .el-header div{
          display: flex;
          align-items: center;
      }
      .el-header div span{
          margin-left: 20px;
      }
      .el-header div img{
          width: 60px;
      }
      .el-dropdown {
          vertical-align: top;
      }
      .el-header div .el-avatar img{
          width: 30px;
      }
      .el-header .el-avatar {
          margin-right: 10px;
      }
      .el-icon-arrow-down {
          font-size: 12px;
      }
      .usersetting {
          padding-left: 5px;
      }
      /* 侧边栏 */
      .el-aside{
          background-color:#a0cfff;
      }
      .el-aside .el-menu{
          border-right: none;
      }
      .el-menu a {
          text-decoration: none;
          color: whitesmoke;
          font-size: 16px;
      }
      /* 内容区 */
      .monthSelector {
          margin-top: 10px;
      }
      .box-card {
          margin-top: 10px;
      }
  </style>
</head>
<body>
  <div id="app">
    <el-container class="home_box">
        <el-header>
          <div>
            <img src="../../static/img/logo.png" alt="">
            <span>XX公司直播数据管理系统</span>
          </div>
          <div>
            <el-avatar :size="30" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
            <el-dropdown>
              <el-button type="warning" class="usersetting">
                  小明<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>账号设置</el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <el-container>
          <el-aside width="170px">
            <el-menu>
                <el-row>
                    <el-col :span="24">
                      <el-menu
                        default-active="4"
                        class="el-menu-vertical-demo"
                        background-color="#e6a23c"
                        text-color="white"
                        active-text-color="#a0cfff">
                        <el-menu-item index="1" @click="toUsers">
                            <i class="el-icon-location"></i>
                            <span slot="title">工作台</span>
                          </el-menu-item>
                        <el-menu-item index="2" @click="toAnchors">
                          <i class="el-icon-menu"></i>
                          <span slot="title">主播管理</span>
                        </el-menu-item>
                        <el-menu-item index="3" @click="toData">
                          <i class="el-icon-document"></i>
                          <span slot="title">数据中心</span>
                        </el-menu-item>
                        <el-menu-item index="4" @click="toTask">
                          <i class="el-icon-setting"></i>
                          <span slot="title">任务管理</span>
                        </el-menu-item>
                      </el-menu>
                    </el-col>
                </el-row>
            </el-menu>
          </el-aside>
          <el-main>
                <el-row class="taskHeader">
                    <el-col :span="21">任务列表</el-col>
                    <el-col :span="3" class="taskSort">  
                        <el-button type="primary">详细列表分类</el-button>
                    </el-col>
                </el-row>
                <div class="card-content">
                    <el-card class="box-card" style="width:100%">
                        <div slot="header" class="clearfix">
                          <span>进行中任务</span>
                          <div class="block monthSelector">
                            <el-date-picker
                              v-model="taskMonth"
                              type="month"
                              placeholder="选择月">
                            </el-date-picker>
                          </div>
                        </div>
                        <el-table
                        :data="taskData"
                        style="width: 100%"
                        :default-sort = "{prop: 'date', order: 'descending'}"
                        >
                            <el-table-column
                            prop="taskName"
                            label="任务名称"
                            align="center"
                            width="230">
                            </el-table-column>
                            <el-table-column
                            prop="taskStartTime"
                            label="开始时间"
                            align="center"
                            sortable
                            width="150">
                            </el-table-column>
                            <el-table-column
                            prop="taskEndTime"
                            label="结束时间"
                            align="center"
                            sortable
                            width="150"
                            sortabl>
                            </el-table-column>
                            <el-table-column
                            prop="taskFinishStatus"
                            label="达成情况"
                            align="center">
                            </el-table-column>
                            <el-table-column
                            prop="taskStatus"
                            label="状态"
                            align="center">
                            </el-table-column>
                            <el-table-column
                            prop="taskRewords"
                            label="任务奖励"
                            align="center">
                            </el-table-column>
                            <el-table-column
                            label="操作"
                            align="center">
                                <el-link type="primary">任务详情</el-link>
                            </el-table-column>
                      </el-table>
                    </el-card>
                    <el-card class="box-card" style="width:100%">
                        <div slot="header" class="clearfix">
                          <span>已结束任务</span>
                          <div class="block monthSelector">
                            <el-date-picker
                              v-model="taskMonth"
                              type="month"
                              placeholder="选择月">
                            </el-date-picker>
                          </div>
                        </div>
                        <el-table
                        :data="taskData"
                        style="width: 100%"
                        :default-sort = "{prop: 'date', order: 'descending'}"
                        >
                            <el-table-column
                            prop="taskName"
                            label="任务名称"
                            align="center"
                            width="230">
                            </el-table-column>
                            <el-table-column
                            prop="taskStartTime"
                            label="开始时间"
                            align="center"
                            sortable
                            width="150">
                            </el-table-column>
                            <el-table-column
                            prop="taskEndTime"
                            label="结束时间"
                            align="center"
                            sortable
                            width="150"
                            sortabl>
                            </el-table-column>
                            <el-table-column
                            prop="taskFinishStatus"
                            label="达成情况"
                            align="center">
                            </el-table-column>
                            <el-table-column
                            prop="taskStatus"
                            label="状态"
                            align="center">
                            </el-table-column>
                            <el-table-column
                            prop="taskRewords"
                            label="任务奖励"
                            align="center">
                            </el-table-column>
                            <el-table-column
                            label="操作"
                            align="center">
                                <el-link type="primary">任务详情</el-link>
                            </el-table-column>
                      </el-table>
                    </el-card>
                    <el-card class="box-card" style="width:100%">
                        <div slot="header" class="clearfix">
                          <span>已完成任务</span>
                          <div class="block monthSelector">
                            <el-date-picker
                              v-model="taskMonth"
                              type="month"
                              placeholder="选择月">
                            </el-date-picker>
                          </div>
                        </div>
                        <el-table
                        :data="taskData"
                        style="width: 100%"
                        :default-sort = "{prop: 'date', order: 'descending'}"
                        >
                            <el-table-column
                            prop="taskName"
                            label="任务名称"
                            align="center"
                            width="230">
                            </el-table-column>
                            <el-table-column
                            prop="taskStartTime"
                            label="开始时间"
                            align="center"
                            sortable
                            width="150">
                            </el-table-column>
                            <el-table-column
                            prop="taskEndTime"
                            label="结束时间"
                            align="center"
                            sortable
                            width="150"
                            sortabl>
                            </el-table-column>
                            <el-table-column
                            prop="taskFinishStatus"
                            label="达成情况"
                            align="center">
                            </el-table-column>
                            <el-table-column
                            prop="taskStatus"
                            label="状态"
                            align="center">
                            </el-table-column>
                            <el-table-column
                            prop="taskRewords"
                            label="任务奖励"
                            align="center">
                            </el-table-column>
                            <el-table-column
                            label="操作"
                            align="center">
                                <el-link type="primary">任务详情</el-link>
                            </el-table-column>
                      </el-table>
                    </el-card>
                    <el-card class="box-card" style="width:100%">
                        <div slot="header" class="clearfix">
                          <span>未完成任务</span>
                          <div class="block monthSelector">
                            <el-date-picker
                              v-model="taskMonth"
                              type="month"
                              placeholder="选择月">
                            </el-date-picker>
                          </div>
                        </div>
                        <el-table
                        :data="taskData"
                        style="width: 100%"
                        :default-sort = "{prop: 'date', order: 'descending'}"
                        >
                            <el-table-column
                            prop="taskName"
                            label="任务名称"
                            align="center"
                            width="230">
                            </el-table-column>
                            <el-table-column
                            prop="taskStartTime"
                            label="开始时间"
                            align="center"
                            sortable
                            width="150">
                            </el-table-column>
                            <el-table-column
                            prop="taskEndTime"
                            label="结束时间"
                            align="center"
                            sortable
                            width="150"
                            sortabl>
                            </el-table-column>
                            <el-table-column
                            prop="taskFinishStatus"
                            label="达成情况"
                            align="center">
                            </el-table-column>
                            <el-table-column
                            prop="taskStatus"
                            label="状态"
                            align="center">
                            </el-table-column>
                            <el-table-column
                            prop="taskRewords"
                            label="任务奖励"
                            align="center">
                            </el-table-column>
                            <el-table-column
                            label="操作"
                            align="center">
                                <el-link type="primary">任务详情</el-link>
                            </el-table-column>
                      </el-table>
                    </el-card>
                </div>
          </el-main>
        </el-container>
    </el-container>
  </div>
</body>
<script>
  Vue.use(httpVueLoader);
  new Vue({
      el: '#app',
      data () {
        return {
            taskMonth: '',
            taskData: [{
                taskName: "公会流量任务-周新增有效主播 | 提升有效主播，获得推荐位奖励",
                taskStartTime: '2016-05-02',
                taskEndTime: '2016-05-07',
                taskFinishStatus: '完成主播人数：0 人',
                taskStatus: '未完成',
                taskRewords: "0.0元"
            }, {
                taskName: "公会周流量任务-周有效主播 | 提升有效主播，获得人气卡奖励",
                taskStartTime: '2016-05-02',
                taskEndTime: '2016-05-07',
                taskFinishStatus: '完成主播人数：0 人',
                taskStatus: '未完成',
                taskRewords: "0.0元"
            }, {
                taskName: "公会流量任务-周新增有效主播 | 提升有效主播，获得推荐位奖励",
                taskStartTime: '2016-05-02',
                taskEndTime: '2016-05-07',
                taskFinishStatus: '完成主播人数：0 人',
                taskStatus: '未完成',
                taskRewords: "0.0元"
            }, {
                taskName: "公会周流量任务-周有效主播 | 提升有效主播，获得人气卡奖励",
                taskStartTime: '2016-05-02',
                taskEndTime: '2016-05-07',
                taskFinishStatus: '完成主播人数：0 人',
                taskStatus: '未完成',
                taskRewords: "0.0元"
            }]
        }
      },
      methods: {
            toUsers () {
                window.location.href = "/user/index"
            },
            toAnchors () {
                window.location.href = "/user/anchors"
            },
            toData () {
                window.location.href = "/user/data"
            },
            toTask () {
                window.location.href = "/user/tasks"
            }
        }
  })
</script>
</html>